<template>
	<view class="container">
		<view class="m-title">
			收件信息<text @click="copy">点击复制</text>
		</view>
		<view class="main">
			<view class="p">
				<text>收件人</text>{{receive.receive_name}}
			</view>
			<view class="p">
				<text>联系电话</text>{{receive.receive_mobile}}
			</view>
			<view class="p">
				<text>收件地址</text>{{receive.receive_address}}
			</view>
		</view>
		<view class="m-title">
			商品信息
		</view>
		<view class="list-goods">
			<view class="item u-flex u-col-top u-row-between" v-for="(item,index) in list" :key="index">
				<view class="img">
					<image :src="http + item.image" mode="aspectFill"></image>
				</view>
				<view class="con">
					<view class="title u-line-1">
						{{item.title}}
					</view>
					<view class="tips mt20">
						<text v-for="(item3,index3) in item.spec.split(',')">{{item3}}</text>
						<text v-for="(item4,index4) in item2.mountings_texts" :key="index4">
						{{item4.title}}-{{item4.intro}}</text>
					</view>
				</view>
				<view class="r">
					<view class="price">
						{{item.price - item.mountings_price}}元
					</view>
					<view class="num">
						×{{item.num}}
					</view>
				</view>
			</view>

		</view>
		<view class="m-title">
			订单信息
		</view>
		<view class="list-order"  v-if="data && data.order_no">
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					订单编号
				</view>
				<view class="r">
					{{data.order_no}}
				</view>
			</view>

			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					订单状态
				</view>
				<view class="r">
					{{ss2[data.status]}}
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					商品金额
				</view>
				<view class="r">
					{{data.order_price}}元
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					服务费
				</view>
				<view class="r">
					-{{data.deduct_price}}元
				</view>
			</view>

			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					订单金额
				</view>
				<view class="r">
					{{data.total_price}}元
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					实付金额
				</view>
				<view class="r">
					{{data.pay_price}}元
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					下单时间
				</view>
				<view class="r">
					{{getTime(data.createtime)}}
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					姓名
				</view>
				<view class="r">
					{{data.receive_name}}
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					支付宝账号
				</view>
				<view class="r">
					{{data.receive_account}}
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					淘宝订单号
				</view>
				<view class="r">
					{{data.tb_order_ons ||'-'}}
				</view>
			</view>
			<view class="item u-flex u-col-top u-row-between">
				<view class="l">
					备注信息
				</view>
				<view class="r">
					{{data.remark||'-'}}
				</view>
			</view>
			<view class="item u-flex u-col-top u-row-between" v-if="data.fail_reason && data.status == 6">
				<view class="l">
					拒绝原因
				</view>
				<view class="r">
					{{data.fail_reason||'-'}}
				</view>
			</view>
			
			
			<!-- 1=待审核,2=待寄出,3=待验货,4=待打款,5=已完成,6=已关闭,7=已归档 -->
			<view class="item u-flex u-col-center u-row-between" v-if="data.status == 3||data.status == 4||data.status == 5||data.status == 7">
				<view class="l">
					物流公司
				</view>
				<view class="r">
					{{data.express_name||''}}
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between" v-if="data.status == 3||data.status == 4||data.status == 5||data.status == 7">
				<view class="l">
					物流单号
				</view>
				<view class="r">
					{{data.express_no||''}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ss2: ['', '待审核', '待寄出', '待验货', '待打款', '已完成', '已关闭', '已归档'], //1=待审核,2=待寄出,3=待验货,4=待打款,5=已完成,6=已关闭,7=已归档
				http: this.$imgUrl,
				kd: '',
				name: "",
				alplay: "",
				orders: "",
				notes: "",
				content: ``,
				id: "",
				data: {
					order_no:''
				},
				list: [],
				receive: {
					receive_address: "",
					receive_mobile: "",
					receive_name: '',

				}
			}
		},
			
		onLoad(o) {
			my.setNavigationBar({
			  frontColor: '#000',
			  backgroundColor: '#fff',
			})
			if (!uni.getStorageSync('token')) {
				uni.switchTab({
					url:'/pages/index/index'
				})
				return
			}
			this.id = o.id
			this.getData()
		},
		computed: {
			getTime() {
				return (t) => {
					const now = new Date(t * 1000); // 获取当前时间
					const year = now.getFullYear(); // 年份
					const month = now.getMonth() + 1; // 月份，
					const date = now.getDate(); // 日期
					const hours = now.getHours(); // 小时
					const minutes = now.getMinutes(); // 分钟
					const seconds = now.getSeconds(); // 秒钟
					// 组合成字符串
					const formattedTime =
						`${year}-${month.toString().padStart(2, '0')}-${date.toString().padStart(2, '0')} ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
					console.log(formattedTime); // 输出类似于 "2023-03-20 16:30:00" 的字符串
					return formattedTime
				}
			}
		},
		methods: {
			copy() {
				let data = `${this.receive.receive_name}  ${this.receive.receive_mobile}  ${this.receive.receive_address}`
				uni.setClipboardData({
					data: data,
					success: () => {
						console.log('success');
						uni.showToast({
							title: '已复制',
							icon: "none"
						});
					}
				});
			},
			getData() {
				this.$http.post('/api/order/detail', {
					id: this.id
				}).then(res => {
					if (res.code == 1) {

						this.data = res.data
						this.list = res.data.products
						this.receive = res.data.receive
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}).catch(err => {
					console.log('错误信息：', err);
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	@color: #E31D21;

	.container {
		padding: 30rpx 30rpx 150rpx;

		.footer {
			position: fixed;
			background-color: #fff;
			left: 0;
			right: 0;
			padding: 20rpx 30rpx;
			z-index: 999;
			bottom: 0;

			.btn {
				width: 100%;
				height: 80rpx;
				text-align: center;
				border-radius: 40rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #fff;
				background-color: @color;
			}
		}

		.list-order {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 10rpx;

			.item {
				padding: 10rpx 0;

				.l {
					font-size: 28rpx;
					color: #333;
					width: 160rpx;
				}

				.r {
					margin-left: 20rpx;
					flex: 1;
					width: 1rpx;
					font-size: 24rpx;
					color: #666;
					text-align: right;
					line-height: 40rpx;
				}
			}
		}

		.kd {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 10rpx;

			.l {
				flex: 1;
				width: 1rpx;
				margin-right: 20rpx;

				input {
					font-size: 28rpx;
					color: #333;
					height: 60rpx;
					line-height: 60rpx;
				}
			}

			.r {}
		}

		.list-express {
			background-color: #fff;
			padding: 20rpx 20rpx 0;
			border-radius: 10rpx;
			flex-wrap: wrap;

			.item {
				margin: 0 15rpx 20rpx 0;
				width: 110rpx;
				height: 80rpx;

				&:nth-child(5n) {
					margin-right: 0;
				}

				image {
					width: 120rpx;
					height: 80rpx;
				}

			}
		}

		.body {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 10rpx;
		}

		.textarea {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 10rpx;

			textarea {
				width: 100%;
				height: 100rpx;
				font-size: 28rpx;
				color: #333;
			}
		}

		.list {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 10rpx;

			.item {
				padding: 10rpx 0;

				.l {
					width: 130rpx;
					font-size: 26rpx;
					color: #333;
				}

				.r {
					flex: 1;
					width: 1rpx;
					margin-left: 20rpx;

					input {
						font-size: 28rpx;
						color: #333;
						height: 60rpx;
						line-height: 60rpx;
						width: 100%;
					}
				}
			}
		}

		.list-goods {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 10rpx;

			.item {
				padding: 10rpx 0;
				border-bottom: 2rpx solid #eee;

				.img {
					width: 112rpx;
					height: 180rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.con {
					flex: 1;
					padding: 0 20rpx;
					width: 1rpx;

					.title {
						font-size: 28rpx;
						color: #333;
					}

					.tips {

						text {
							color: #999;
							font-size: 24rpx;
							margin: 10rpx 10rpx 0 0;
						}
					}
				}

				.r {
					text-align: right;

					.price {
						font-size: 24rpx;
						color: #666;
						height: 60rpx;
						line-height: 60rpx;
					}

					.num {
						font-size: 24rpx;
						color: #666;
					}
				}
			}
		}

		.m-title {
			height: 80rpx;
			line-height: 80rpx;
			color: #333;
			font-size: 32rpx;

			text {
				margin-left: 10rpx;
				font-size: 24rpx;
				color: @color;
			}
		}

		.main {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 10rpx;

			.p {
				line-height: 40rpx;
				font-size: 24rpx;
				color: #333;

				text {
					width: 150rpx;
					margin-right: 30rpx;
				}
			}
		}
	}
</style>